<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <meta name="author" content="深圳方维网络科技有限公司  http://www.szfangwei.cn">
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit"/>

    <title>浪尖案例</title>


    <link rel="stylesheet" href="css/jquery.fullPage.css"/>
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/css-reset.css">
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/media.css">
    <!--[if lt IE 9]><link rel="stylesheet" href="css/ie-none.css"><![endif]-->


    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <script src="js/idangerous.swiper.min.js"></script>
    <script src="js/jquery.SuperSlide.2.1.2.js"></script>
    <script src="js/basic.js"></script>

    <script src="js/hammer.min.js"></script>


    <!--[if lt IE 9]><script src="js/html5.js" ></script><![endif]-->
    <!--[if lt IE 9]><script src="js/selectivizr-min.js" ></script><![endif]-->

</head>

<body>






<!--PC内页顶部，和首页顶部不一样-->
<div class="inner-header"></div>

<!--手机新闻和案例顶部，与别的页面不同-->
<div class="iphone-inner-header"></div>

<!--内页banner-->
<div class="inner-banner"></div>


<div class="case-i">

    <div class="case-i-title">
        <h3>项目介绍</h3>
        <p><泰克鲁斯官方网站建设></p>
    </div>
    <div class="case-i-tip clear">
        <div class="case-i-tip-icon"><img src="images/case-i-tip.png" alt=""></div>
        <span>网站设计</span>
        <span>官方网站</span>
        <span>欧美风格</span>
    </div>


    <div class="case-i-content">
        <div class="case-i-content-p">
            <p>泰克鲁斯官方网站，采用了欧美风格设计。本作品最令人祖母的是网站的交互设计。网站访问者可以通过许多交互功能，生动的体验泰克鲁斯的外观、<br>
                功能、以及人性化的独特之处。我们用更多的交互设计让访客来体验，也是为了突显这款车型的与众不同，您也可以试试选择不同颜色的图标，车型<br>
                随时变换的效果，现在来体验吧！</p>
        </div>

        <div class="case-img-box">

            <div class="case-img-box-i">
                <img src="images/case-i-img.jpg" alt="">
            </div>

            <!--弹出框-->
            <div class="cb-dark">
                <div class="cb-dark-c">

                    <div class="go-top-case">
                        <a href="javascript:;" onclick="return false;"><img src="images/goTop-img.png" alt=""/></a>
                    </div>


                    <div class="cb-dark-title">
                        <div class="case-i-title">
                            <h3>项目介绍</h3>
                            <p><泰克鲁斯官方网站建设></p>
                        </div>
                        <div class="case-i-tip clear">
                            <div class="case-i-tip-icon"><img src="images/case-i-tip.png" alt=""></div>
                            <span>网站设计</span>
                            <span>官方网站</span>
                            <span>欧美风格</span>
                        </div>
                        <div class="case-i-content-p">
                            <p>泰克鲁斯官方网站，采用了欧美风格设计。本作品最令人祖母的是网站的交互设计。<br>网站访问者可以通过许多交互功能，生动的体验泰克鲁斯的外观、功能、以及人性化的独特之处。<br>我们用更多的交互设计让访客来体验，也是为了突显这款车型的与众不同，您也可以试试选择不同颜色的图标，车型随时变换的效果，现在来体验吧！</p>
                        </div>
                    </div>
                    <div class="cb-dark-img">
                        <img src="images/case-i-img.jpg" alt="">
                    </div>
                </div>
            </div>

        </div>

    </div>


</div>





<!--内页底部-->
<div class="inner-footer">
    <div class="sec5-bot">
        <div class="sec5-bot-logo">
            <img src="images/logo-white.png" alt=""/>
        </div>

        <div class="bot-contact">
            <a href="#"><img src="images/qq2.png" alt=""/></a><a href="#"><img src="images/weixin2.png" alt=""/></a><a href="#"><img src="images/xinlang2.png" alt=""/></a>
        </div>

        <div class="bot-call">
            <p><span class="bot-call-phone">0755-8354 4131 </span></p>
            <p><span class="bot-call-mail">account@artopbrand.com</span></p>
            <p><span class="bot-call-address">深圳市南山区南山大道3838号设计产业园浪尖设计大楼二楼ABCD</span></p>

        </div>

        <div class="bot-right">
            <p>© 2016 ABCD. All rights reserved.  | privacy policy | terms of use</p>
        </div>
    </div>

</div>



<script>

    $(function () {


        //缓缓回到顶部
        $('.go-top-case').click(function () {
            $('.cb-dark').animate({'scrollTop':0},600);
        });


        //让导航跳转
        $("a").attr('data-ajax',false);



        //案例弹窗
        $('.case-img-box-i img').click(function () {
            var ww=$(window).width();
            if(ww >780){
                $('.sec1-nav').hide();
                $(this).parent().next('.cb-dark').show();
                $(this).parent().parent().find('.cb-dark-c').delay(300).animate({opacity: '1'},700);
                $('html').css('overflow','hidden');
            }
        });
        $('.cb-dark').click(function () {
            $('.sec1-nav').show();
            $(this).find('.cb-dark-c').animate({opacity: '0'},10);
            $(this).hide();
            $('html').css('overflow','visible');
            return false
        });
        $('.cb-dark-c').click(function () {
            return false;
        });



        //封装鼠标悬停导航显示
        function sc_hover(){
            $('.sec1-nav-contain').hover(function () {
                $('.sec1-nav').stop().animate({top: "0"},300);
            }, function () {
                $('.sec1-nav').stop().animate({top: "-3.7rem"},300);
                $('.sec1-search-icon').show();
                $('.sec1-search-box').hide();
                $('.sec1-search-input').removeClass('on');
                $('.sec-search-menu a').removeClass('on');
            });
        }



        //滚轮控制页面滑动
        var num=0;
        var scrollFunc=function(e){
            e=e || window.event;

            num++;
            //console.log(num);

            //判断绑定和解除事件绑定
            var top_H=$(document).scrollTop();
            //console.log(top_H);
            if( top_H>200 ){
                $('.sec1-nav-contain').on(sc_hover());
            }else{
                $('.sec1-nav-contain').off(sc_hover());
            }


            if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
                //alert("火狐浏览器");
                t2=e.detail;

                if(t2 < 0){  //下滑
                    //导航滑出
                    $('.sec1-nav').stop().animate({top: "0"},200);

                }else if(t2>0 && top_H<10 ){
                    //导航滑出
                    $('.sec1-nav').stop().animate({top: "0"},200);
                }else{
                    //导航缩回
                    $('.sec1-nav').stop().animate({top: "-3.7rem"},200);
                    $('.sec1-search-icon').show();
                    $('.sec1-search-box').hide();
                    $('.sec1-search-input').removeClass('on');
                    $('.sec-search-menu a').removeClass('on');
                }

            }else{
                //谷歌360IE等等
                t1=e.wheelDelta;

                if(t1 > 0){
                    //导航滑出
                    $('.sec1-nav').stop().animate({top: "0"},300);

                }else{
                    //导航缩回
                    $('.sec1-nav').stop().animate({top: "-3.7rem"},300);
                    $('.sec1-search-icon').show();
                    $('.sec1-search-box').hide();
                    $('.sec1-search-input').removeClass('on');
                    $('.sec-search-menu a').removeClass('on');
                }
            }


        };
        /*注册事件*/
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll',scrollFunc,false);
        }//W3C
        document.onmousewheel=scrollFunc;//IE/Opera/Chrome


    })

</script>





</body>
</html>